import classNames from 'classnames';
import { useMediaPredicate } from 'react-media-hook';
import { useSelector } from 'react-redux';
import { MediaQuery } from 'src/constant/Media';
import IcUsdt from 'src/image/ic-usdt.svg';
import { RootState } from 'src/redux/store';
import { bn } from 'src/util/bigNumber';
import style from './Report.module.scss';
import Statement from './Statement';

const ReportWithoutTabs = () => {
  const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
  const { me, kids, members } = useSelector((rootState: RootState) => rootState.rebate);



  return (
    <>
      <div className={style.paper}>
        {members && (
          <>
            <div className={style.title}>团队总计</div>
            {isBiggerThanMd && (
              <>
                <div className={style.row}>
                  <div className={style.head}>
                    <img src={IcUsdt} />
                    <div className={style.coin}>USDT</div>
                  </div>
                  <div className={style.key}>贩售</div>
                  <div className={style.key}>返佣</div>
                </div>
                <div className={style.divider} />
              </>
            )}
            <Statement
              info={{
                email: 'xx',
                userId: 'xx',
                SumSell: members
                  .reduce((sum, current) => sum.plus(bn(current.SumSell)), bn(0))
                  .toFormat(),
                SumDisc: members
                  .reduce((sum, current) => sum.plus(bn(current.SumDisc)), bn(0))
                  .toFormat(),
              }}
              showCoin
            />
          </>
        )}
        {(
          <>
            <div
              className={classNames(style.title, {
                [style.top]: members && members.length > 0,
              })}
            >
              个人
            </div>
            {isBiggerThanMd && (
              <>
                <div className={style.row}>
                  <div className={style.head}>
                    <img src={IcUsdt} />
                    <div className={style.coin}>USDT</div>
                  </div>
                  <div className={style.key}>贩售</div>
                  <div className={style.key}>返佣</div>
                </div>
                <div className={style.divider} />
              </>
            )}
            <Statement info={me} showCoin />
          </>
        )}
        {kids && kids.length > 0 && (
          <>
            <div className={classNames(style.title, style.top)}>下级</div>
            {isBiggerThanMd && (
              <>
                <div className={style.row}>
                  <div className={style.head}>
                    <img src={IcUsdt} />
                    <div className={style.coin}>USDT</div>
                  </div>
                  <div className={style.key}>贩售</div>
                  <div className={style.key}>返佣</div>
                </div>
                <div className={style.divider} />
              </>
            )}
            {kids.map((v, i) => (
              <Statement key={v.FMail} info={v} showCoin={i === 0} showEmail />
            ))}
          </>
        )}
        {kids && (
          <>
            <div className={classNames(style.title, style.top)}>团队</div>
            {isBiggerThanMd && (
              <>
                <div className={style.row}>
                  <div className={style.head}>
                    <img src={IcUsdt} />
                    <div className={style.coin}>USDT</div>
                  </div>
                  <div className={style.key}>贩售</div>
                  <div className={style.key}>返佣</div>
                </div>
                <div className={style.divider} />
              </>
            )}
            {kids.map((v, i) => (
              <Statement key={v.FMail} info={v} showCoin={i === 0} showEmail />
            ))}
          </>
        )}
      </div>
    </>
  );
};

export default ReportWithoutTabs;
